<template>
  <div class="statistics">
    <subheadings :name='`${provinceName}断层段数量情况统计`' />
    <div class="statistics-change">
        <el-link type="primary" @click="status = '1'" :underline="false" v-show="status=='0'">完成探查数量</el-link>
        <el-link type="primary" @click="status = '0'" :underline="false" v-show="status=='1'">数量及长度</el-link>
      </div>
    <div class="statistics-table">
      <el-table :data="tableData" height="100%" v-loading="loading" v-show="status=='0'">
        <el-table-column prop="city" label="市" align="center" />
        <el-table-column prop="number" label="断层数量" align="center">
          <template #default="{ row }">
            <span style="color: #46FFFF;">{{ row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="length" label="断层长度" align="center">
          <template #default="{ row }">
            <span style="color: #46FFFF;">{{ row.length }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" height="100%" v-show="status=='1'">
        <el-table-column prop="city" label="市" align="center" />
        <el-table-column prop="oneLevel" label="一级断层" align="center">
          <template #default="{ row }">
            <span style="color: #46FFFF;">{{ row.oneLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevel" label="二级断层" align="center">
          <template #default="{ row }">
            <span style="color: #46FFFF;">{{ row.twoLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="other" label="其他断层" align="center">
          <template #default="{ row }">
            <span style="color: #46FFFF;">{{ row.other }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { getFaultNumLenByPro } from '@/api/activeFault'

const route = useRoute()
const { provinceName } = route.query
const loading = ref(false)
const status = ref('0')
const tableData = ref([])

const getStatistics = () => {
  getFaultNumLenByPro({province: provinceName}).then(res => {
    tableData.value = res.data
  })
}
onMounted(() => {
  getStatistics()
})
</script>
<style scoped lang="scss">
.statistics {
  height: 100%;
  position: relative;
  :deep(.statistics-change) {
    position: absolute!important;
    top: 0;
    right: 10px;
    height: 80px;
    line-height: 80px;
  }

  .statistics-table {
    height: calc(100% - 85px);
    min-height: 290px;
    overflow-y: auto;

    .el-table {
      width: 420px;
      margin: 0 auto;
      overflow-x: hidden;
      overflow-y: auto;
      background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);

      :deep(tr:hover>td) {
        background-color: rgba(71, 90, 219, .05) !important;
      }

      :deep(.el-table__header) {
        border-bottom: 1px solid #475ADB;

        tr {
          background-color: transparent !important;
        }

        th.el-table__cell {
          background-color: transparent !important;
        }

        th.el-table__cell.is-leaf {
          border-bottom: none;
        }
      }

      :deep(.el-table__inner-wrapper::before) {
        display: none;
      }
    }
  }
}
</style>